<template>
  <div class="box" ref="charts">

  </div>
</template>

<script setup lang="ts">
//引入echarts
import * as echarts from 'echarts';
//引入组合式API
import { ref, onMounted, watch } from 'vue';
//获取容器的DOM节点
let charts = ref();
//定义一个mycharts，让他成为全局属性
let mycharts;
//封装函数，返回mychart配置对象
const getOption = () => {
  return {
      xAxis: {
          type: 'category',//x轴均分
          show: false,//隐藏x轴
          boundaryGap: false,//x轴两边不留白
      },
      yAxis: {
          show: false,
      },
      series: {
          type: 'line',//线形图
          data: props.data,//数据
          smooth: true,//直线变曲线
          itemStyle: {
              //拐点样式
              opacity: 0,//拐点透明度为0，隐藏
          },
          //区域填充
          areaStyle: {
              color: {//渐变色
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                      {
                          offset: 0,
                          color: "skyblue", // 0% 处的颜色
                      },
                      {
                          offset: 1,
                          color: "white", // 100% 处的颜色
                      },
                  ],
                  global: false, // 缺省为 false
              },
          }
      },
      //调整图形图标的布局
      grid:{
          left:0,
          right:0,
          top:0,
          bottom:0,
          // show:true,
          //图标底层的颜色
          // backgorundColor:"red"
      },
      //提示插件
      tooltip:{
          trigger:'axis',
          //限制展示区域
          confine:true
      }
  }
};
//初始化echarts实例
onMounted(() => {
  mycharts = echarts.init(charts.value);
  //配置项
  mycharts.setOption(getOption());

  //绑定浏览器狂口变化的事件
  //DOM0事件后者会覆盖前者，DOM2事件可用
  window.addEventListener('resize', () => {
      mycharts.resize();
  })
});

//接收父组件传递过来的数据
let props = defineProps(['data']);
//监听父组件传递过来的数据
//数据变化，watch监听，重新配置
watch(() => props.data, () => {
  mycharts.setOption(getOption());
})
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ccc
}
</style>